<script lang="ts" setup>
import OrderMovies from "@/components/order/OrderMoviesComponent.vue";
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { moviePinia } from '../stores/home'
const movieStore = moviePinia()
const {order} = storeToRefs(movieStore)
console.log(order.value);
const router = useRouter();
</script>

<template>
    <div class="order-page">
        <div class="order-top">
            <img src="../assets/imgs/mine/white-left.png" @click="router.go(-1)">
            <div class="order-title">电影票订单</div>
            <div></div>
        </div>

        <OrderMovies v-for="(el,index) in order" :key="index"  :info="el"/>
    </div>
</template>

<style lang="scss" scoped>
.order-page{

    .order-top{
        color: #FFFFFF;
        font-size: 14px;
        width: 100vw;
        height: 14vw;
        padding: 0 4vw;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #de403d;
        
        img{
            width: 6vw;
        }
        .order-title{
            font-size: 16px;
            width: 66vw;
            line-height: 7vw;
            padding-left: 4vw;
            border-left: #c1342b 1px solid;
        }
    }
}
</style>